<template>
  <el-container>
  <!--左侧-->
    <el-aside :width="isCollapse?'64px':'200px'">
      <div class="menuTitle">@动力云客管理系统</div>
      <el-menu
          active-text-color="#ffd04b"
          background-color="#334157"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          style="border-right: solid 0px"
          :unique-opened="true"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
      >
        <!--市场活动菜单-->
        <el-sub-menu index="1">
          <template #title>
            <el-icon><OfficeBuilding /></el-icon>
            <span>市场活动</span>
          </template>
          <el-menu-item index="1-1">
            <el-icon><Notification /></el-icon>
            市场活动
          </el-menu-item>
          <el-menu-item index="1-2">
            <el-icon><DataAnalysis /></el-icon>
            市场统计
          </el-menu-item>
        </el-sub-menu>

        <!--线索管理菜单-->
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Magnet /></el-icon>
            <span>线索管理</span>
          </template>
          <el-menu-item index="2-1">
            <el-icon><CreditCard /></el-icon>
            线索管理
          </el-menu-item>
          <el-menu-item index="2-2">
            <el-icon><Suitcase /></el-icon>
            线索统计
          </el-menu-item>
        </el-sub-menu>

        <!--客户管理菜单-->
        <el-sub-menu index="3">
          <template #title>
            <el-icon><User /></el-icon>
            <span>客户管理</span>
          </template>
          <el-menu-item index="3-1">
            <el-icon><UserFilled /></el-icon>客户管理
          </el-menu-item>
        </el-sub-menu>

        <!--交易管理菜单-->
        <el-sub-menu index="4">
          <template #title>
            <el-icon><Wallet /></el-icon>
            <span>交易管理</span>
          </template>
          <el-menu-item index="4-1">
            <el-icon><EditPen /></el-icon>交易管理
          </el-menu-item>
        </el-sub-menu>

        <!--产品管理菜单-->
        <el-sub-menu index="5">
          <template #title>
            <el-icon><Memo /></el-icon>
            <span>产品管理</span>
          </template>
          <el-menu-item index="5-1">
            <el-icon><SuitcaseLine /></el-icon>产品管理
          </el-menu-item>
        </el-sub-menu>

        <!--字典管理菜单-->
        <el-sub-menu index="6">
          <template #title>
            <el-icon><Grid /></el-icon>
            <span>字典管理</span>
          </template>
          <el-menu-item index="6-1">
            <el-icon><Goods /></el-icon>字典管理
          </el-menu-item>
        </el-sub-menu>

        <!--用户管理菜单-->
        <el-sub-menu index="7">
          <template #title>
            <el-icon><Stamp /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/dashboard/user">
            <el-icon><SoldOut /></el-icon>用户管理</el-menu-item>
        </el-sub-menu>

        <!--系统管理菜单-->
        <el-sub-menu index="8">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="8-1">
            <el-icon><PhoneFilled /></el-icon>系统管理</el-menu-item>
        </el-sub-menu>

      </el-menu>
    </el-aside>

    <!--右侧-->
    <el-container class="rightContainer">
      <!--右侧-上-->
      <el-header>
        <el-icon @click="showMenu"><Fold /></el-icon>
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>我的资料</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item divided @click="logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <!--右侧-中-->
      <el-main>
        <router-view v-if="isRouterAlive"/>
      </el-main>

      <!--右侧-下-->
      <el-footer>@版权所有 2024-2099 无名子 安徽省合肥市蜀山区锦绣大道99号合肥大学</el-footer>
    </el-container>
  </el-container>
</template>

<script>
import {doGet} from "../http/httpRequest.js";
import {messageConfirm, messageTip, removeToken} from "../util/util.js";

export default {
  name:'DashboardView',
  data(){
    return {
      //定义菜单是否展开
      isCollapse:false,
      //当前登录用户
      user : {},
      //控制主页面是否显示
      isRouterAlive:true,
    }
  },
  //多级页面的数据穿透 ， provide / inject组合
  provide() {
    return {
      //刷新页面
      reload: ()=> {
        this.isRouterAlive = false;   //右侧内容隐藏
        this.$nextTick(function () {  //当数据更新了，在dom中渲染后，自动执行该函数
          this.isRouterAlive = true;
        })
      },
    }
  },

  //vue生命周期的钩子函数：mounted，在页面渲染后执行
  mounted() {
    //加载当前登录用户
    this.loadLoginUser();
  },

  methods:{
    //控制左侧菜单折叠和展开
    showMenu(){
      this.isCollapse = !this.isCollapse;
    },

    //加载当前登录用户
    loadLoginUser() {
      doGet("/api/login/info",{}).then((resp) => {
        this.user = resp.data.data;
      })
    },

    //退出登录
    logout(){
      doGet("/api/logout",{}).then(resp => {
        if(resp.data.code === 200) {
          //清除token
          removeToken();
          //退出成功
          messageTip("退出成功","success");
          //跳转到登录页
          window.location.href = "/";
        }else {
          //给前端用户提示
          messageConfirm( "退出异常，是否强制退出？").then(() => {  //用户点击“确定”触发then函数
            //既然后端验证token未通过，那么删除即可
            removeToken();
            //跳转到登录页
            window.location.href='/';
          }).catch(() => {    //用户点击“取消”触发catch函数
            messageTip("取消退出",'warning');
          })
        }
      })
    },

  },

}
</script>

<style scoped>
.el-aside{
  background: black;
}
.el-header{
  background: azure;
  height: 35px;
  line-height:35px;
}
.el-footer{
  background: aliceblue;
  height: 35px;
  text-align: center;
  line-height: 35px;
}
.rightContainer{
  height:calc(100vh);
}
.menuTitle{
  height:35px;
  color:#f9f9f9;
  text-align: center;
  line-height: 35px;
}
.el-icon{
  cursor:pointer;
}
.el-dropdown{
  float:right;
  line-height:35px;
}
</style>
